<!-- 页面 -->
<template>
    <div style="background: #ccc;">
        <van-row v-for="(item, index) in list" :key="index"
            style=" background: white; border-bottom: 1px solid black; margin-top: 20px;">
            <van-col span="100">
                <img style="width: 10%" :src=item.picture alt="">
                {{ item.name }}
                <span style="float: right;">></span>
                <hr>
            </van-col>
            <van-col span="22">{{ item.name }}</van-col>
            <hr>
            <van-col span="2">{{ item.shu | hhh }}</van-col>
            <hr>
            <van-col span="12" style="color: #ccc;">已完成</van-col>
            <van-col span="10"><van-button style="float: left;" @click="del(item.name)">删除</van-button><van-button
                    type="warning" style="width: 90px; float: left; background: orange;">再来一单</van-button></van-col>
        </van-row>
        <xia :active1="active1"></xia>
    </div>
</template>
<!-- vue -->
<script>
import xia from '@/components/xia.vue'
export default {
    components: {
        xia
    },
    data() {
        return {
            // 声明的属性
            active1: 1,
            list: [],
        }
    },
    //生命周期函数
    mounted() {
        this.list = JSON.parse(localStorage.getItem('baocun'))
        console.log(this.list);
    },
    // 调用方法
    methods: {
        del(name1){
            this.list.forEach((item,index)=>{
                if(name1 == item.name){
                    this.list.splice(index,1)
                }
            })
            localStorage.setItem('baocun',JSON.stringify(this.list) )
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
        hhh(val) {
            return 'X' + val
        }
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style></style>